<template>
  <div class="home">
    <button @click="change">num++</button>
    <h1 ref="box">{{ num }}</h1>
    <img alt="Vue logo" src="../assets/logo.png" />
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <button @click="com = 'child'">改变</button>
    <component :is="com"></component>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  data() {
    return {
      com: "HelloWorld",
      num: 10,
    };
  },
  name: "Home",
  components: {
    HelloWorld,
  },
  created() {
    // console.log(this.$refs.box.innerHTML);
    this.$nextTick(() => {
      console.log(this.$refs.box.innerHTML);
    });
    // 在dom更新之后执行的延迟回调
    // vue的dom更新是异步的
  },
  mounted() {
    console.log(this.$refs.box.innerHTML);
  },
  // beforeUpdate() {
  //   console.log(this.$refs.box.innerHTML);
  //   console.log(this.num);
  // },
  methods: {
    change() {
      this.num++;
      this.$nextTick(() => {
        console.log(this.$refs.box.innerHTML);
      });

      // vue的dom更新是异步的
      //所以同步的代码会先执行 如果想要拿到更新之后的值 就在nexttick中拿
    },
  },
};
</script>
